<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body onload="createPro()">
省：<select id="pid" onchange="selectCity()">
    <option value="0">请选择省份</option>
</select>
市：<select id="cid" onchange="selectArea()">
    <option value="0">请选择城市</option>
</select>
区：<select id="aid">
    <option value="0">请选择区县</option>
</select>
</body>
<script>
    var xmlHttpRequest;
    function selectArea(){
        var cityCode = document.getElementById("cid").value;
        xmlHttpRequest = new XMLHttpRequest();
        // 发送的路径
        var url = "LocationServlet?flag=selectArea&cityCode="+cityCode;
        // 调用open方法发送  get表示请求的方式  url地址  true表示是异步
        xmlHttpRequest.open("GET",url,true);
        xmlHttpRequest.onreadystatechange=callbackArea;
        xmlHttpRequest.send(null);
    }
    function callbackArea(){
        if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) {
            var arr = JSON.parse(xmlHttpRequest.responseText);
            console.log(arr);
            // 删除下拉框的内容
            document.getElementById("aid").length=1;
            for (let i = 0; i <arr.length ; i++) {
                var opt = new Option(arr[i].name,arr[i].code);
                document.getElementById("aid").append(opt);
            }
        }
    }
    function selectCity(){
        var pro = document.getElementById("pid").value;
        xmlHttpRequest = new XMLHttpRequest();
        // 发送的路径
        var url = "LocationServlet?flag=selectCity&proCode="+pro;
        // 调用open方法发送  get表示请求的方式  url地址  true表示是异步
        xmlHttpRequest.open("GET",url,true);
        xmlHttpRequest.onreadystatechange=callbackCity;
        xmlHttpRequest.send(null);
    }
    function callbackCity(){
        if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) {
            var arr = JSON.parse(xmlHttpRequest.responseText);
            console.log(arr);
            // 删除下拉框的内容
            document.getElementById("cid").length=1;
            document.getElementById("aid").length=1;
            for (let i = 0; i <arr.length ; i++) {
                var opt = new Option(arr[i].name,arr[i].code);
                document.getElementById("cid").append(opt);
            }
        }
    }
    function createPro(){
        xmlHttpRequest = new XMLHttpRequest();
        // 发送的路径
        var url = "LocationServlet?flag=selectAllPro";
        // 调用open方法发送  get表示请求的方式  url地址  true表示是异步
        xmlHttpRequest.open("GET",url,true);
        xmlHttpRequest.onreadystatechange=callback;
        xmlHttpRequest.send(null);
    }
    function callback(){
        if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) {
            var arr = JSON.parse(xmlHttpRequest.responseText);
            console.log(arr);
            for (let i = 0; i <arr.length ; i++) {
                var opt = new Option(arr[i].name,arr[i].code);
                document.getElementById("pid").append(opt);
            }
        }
    }
</script>
</html>